<div class="application-role">
    <nz-tabset class="tab-set" [nzSelectedIndex]="index">
      <nz-tab class="application-role" nzTitle="部门管理">
<!-- 搜索栏 -->
<form nz-form [formGroup]="searchForm" class="ant-advanced-search-form">
    <div nz-row [nzGutter]="24" style="white-space: nowrap">
        <div nz-col [nzSpan]="6">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="deptName">部门</nz-form-label>
                <nz-form-control class="search-form-control">
                    <input class="default-input" nz-input formControlName="deptName" placeholder="输入部门名称" />
                    <div *ngIf="submitted && fm['deptName'].invalid">
                        <div *ngIf="fm['deptName'].errors?.['maxlength']">名称长度不超过20</div>
                    </div>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="6">
            <div nz-row>
                <nz-form-label class="search-form-label" nzFor="enabled">状态</nz-form-label>
                <nz-form-control class="search-form-control">
                    <nz-select class="dept-enabled" name="enabled" formControlName="enabled" [nzAllowClear]="true">
                        <nz-option nzValue="true" nzLabel="正常"></nz-option>
                        <nz-option nzValue="false" nzLabel="停用"></nz-option>
                    </nz-select>
                </nz-form-control>
            </div>
        </div>
        <div nz-col [nzSpan]="12">
            <div nz-row>
                <nz-col class="search-button-col">
                    <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="true"
                        (resetEvent)="onReset()" [create]="true"
                        (createEvent)="onCreate(deptMenuTitle, deptMenuContent)"></app-search-button>
                </nz-col>
            </div>
        </div>
    </div>
</form>

<!-- 部门表格 -->
<nz-row style="margin-top: 4px; white-space: nowrap;">
    <nz-table #expandTable [nzData]="depts" nzTableLayout="fixed" [nzFrontPagination]="false" [nzPageIndex]="pageIndex"
        [nzPageSize]="pageSize" [nzTotal]="total" (nzQueryParams)="onPageParamChange($event)">
        <thead>
            <tr>
                <th>部门名称</th>
                <th>部门类型</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <ng-container *ngFor="let data of expandTable.data">
                <ng-container *ngFor="let item of mapOfExpandedData[data.deptId]">
                    <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
                        <td [nzIndentSize]="item.level! * 20" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand"
                            (nzExpandChange)="collapse(mapOfExpandedData[data.deptId], item, $event)">
                            {{item.deptName}}</td>
                        <td>{{item.typeName}}</td>
                        <td>{{item.enabled ? '正常' : '停用'}}</td>
                        <td>{{item.createTime}}</td>
                        <td [nzEllipsis]="true" style="overflow: hidden;" nzRight>
                            <button nz-button class="action-button normal-button"
                                (click)="onDetail(detailTitle, detailContent, item)">详情</button>
                            <button nz-button class="action-button normal-button"
                                (click)="onUpdate(deptMenuTitle, deptMenuContent, item)">编辑</button>
                            <button nz-button class="action-button normal-button"
                                (click)="onCreateBelow(deptMenuTitle, deptMenuContent, item)">新建</button>
        
                            <button nz-button class="action-button delete-button" (click)="onDelete(item.deptId)">删除</button>
                        </td>
                    </tr>
                </ng-container>
            </ng-container>
        </tbody>
    </nz-table>
</nz-row>

<!-- 弹出编辑及添加对话框 -->
<nz-modal>
    <ng-template style="padding: 10px 20px;" #deptMenuTitle>
        {{editTitle}}
        @if (deptName != null) {
        <span style="color: rgb(55, 134, 90);">{{deptName}}</span>
        }
    </ng-template>
    <ng-template #deptMenuContent>
        <app-add-dept (addDeptEvent)="onAddDeptEvent($event)" [modeSubject]="modeSubject"></app-add-dept>
    </ng-template>
</nz-modal>

<nz-modal>
    <ng-template #detailTitle>
        部门详情:<span style="color: rgb(55, 134, 90);">{{deptName}}</span>
    </ng-template>
    <ng-template #detailContent>
        <app-dept-detail (detailEvent)="onDetailEvent($event)" [deptSubject]="deptSubject"></app-dept-detail>
    </ng-template>
</nz-modal>

</nz-tab>
<nz-tab class="application-role" nzTitle="部门类型管理"><app-dept-type></app-dept-type></nz-tab>
    </nz-tabset>
</div>